<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>外教练习查询</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">查查查，查TMD埋点</div>

    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">坑B</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="v">V</a></dd>
                        <dd class="layui-this"><a href="javascript:;">Log</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>日志查询</legend>
        </fieldset>

        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">userId</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userId" id="userId" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">日期</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="day" name="day"
                               placeholder="yyyy-MM-dd" width="20%">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="startTime" autocomplete="off" name="startTime"
                               placeholder="HH:mm:ss" width="20%">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="endTime" autocomplete="off" name="endTime"
                               placeholder="HH:mm:ss" width="20%">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" type="submit">搜索</button>
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" type="button" id="resetToken">重新获取Token</button>
                    </div>
                </div>
            </div>
        </form>
        <table id="logTable" lay-filter="test" lay-size="sm"></table>
    </div>

    <!--<div class="layui-footer">-->
    <!--&lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--© layui.com - 底部固定区域-->
    <!--</div>-->
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        };
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    };


    layui.use(['util', 'jquery', 'element', 'table', 'laydate'], function () {
        var util = layui.util, table = layui.table, form = layui.form, laydate = layui.laydate, $ = layui.$;
        //第一个实例
        util.fixbar({
            showHeight: 10
        });
        //日期范围

        laydate.render({
            elem: '#day'
        });
        laydate.render({
            elem: '#startTime'
            , type: 'time'
        });
        laydate.render({
            elem: '#endTime'
            , type: 'time'
            , value: '23:59:59'
        });
        $('#resetToken').bind('click', function () {
            $.ajax({
                url: 'demo/resetToken',
                type: 'GET',
                dataType: 'json',
                success: function (v) {
                },
                error: function () {

                }
            });
        });
        form.on('submit()', function (data) {
            table.reload('logTable', {
                url: '/demo/table/user',
                where: {
                    userId: $("#userId").val(),
                    startTime: Number(new Date($("#day").val() + ' ' + $("#startTime").val())),
                    endTime: Number(new Date($("#day").val() + ' ' + $("#endTime").val()))
                },
                page: {
                    curr: 1
                }
            })
            ;
            return false;
        });
        table.render({
            elem: '#logTable',
            limit: 500,
            limits: [500],
            size: 'sm',
            page: true,
            data: [],
            cols: [
                [
                    {
                        field: 'msgReceiveTime', width: 110, title: '接收时间', fixed: 'left',
                        templet: function (d) {
                            return new Date(d.msgReceiveTime).format('hh:mm:ss.S');
                        }
                    },
                    {
                        field: 'time', width: 110, sort: true, title: '创建时间',
                        templet: function (d) {
                            if (d.timeError) {
                                return "<span style=\"color:red;\">" + new Date(d.time).format('hh:mm:ss.S') + "</span>";
                            }
                            return new Date(d.time).format('hh:mm:ss.S');
                        }
                    },
                    {
                        title: '信息',
                        templet: function (d) {
                            return d.properties.debug_message;
                        }
                    },
                    {
                        title: '系统信息', width: 90,
                        templet: function (d) {
                            return d.properties.sys_lib;
                        }
                    },
                    {
                        title: 'App信息', width: 120,
                        templet: function (d) {
                            if (d.properties.sys_app_release != "11.0.4") {
                                return "<span style=\"color:red;\">" + d.properties.sys_app_release + ' / ' + d.properties.sys_app_version + "</span>"
                            } else {
                                return d.properties.sys_app_release + ' / ' + d.properties.sys_app_version
                            }

                        }
                    }
                ]
            ],
            response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'totalElements' //数据总数的字段名称，默认：count
                , dataName: 'content' //数据列表的字段名称，默认：data
            }
        });
    });

    function resetToken() {

    }
</script>
</body>
</html>